<template>
  <view class="">
    <slot name="feePaneHeader" :feeTypeOptionList="feeTypeOptionList" :feeTypeDisabled="disabledOnlineFee">
      <view class="fee-pane-header flex items-center" v-if="feeTypeSwitch || $slots.feePaneHeaderFeeName">
        <view class="fee-pane-hedaer-slot" v-if="$slots.feePaneHeaderFeeName">
          <slot name="feePaneHeaderFeeName"></slot>
        </view>
        <ve-form-item prop="orderSource" required label="费用类型" v-if="feeTypeSwitch && feeFormItem.feeDetailList.length > 0">
          <ve-radio v-model="feeFormItem.feeType" :disabled="disabledOnlineFee" :list="feeTypeOptionList" />
        </ve-form-item>
      </view>
    </slot>
    <view
      class="fee-pane-content flex items-start"
      :class="[!showFeeItemTitle ? 'hide-card-title' : '', inlineCard ? 'inline-card' : '']"
      v-if="feeFormItem.feeDetailList.length > 0"
    >
      <view class="fee-list" :style="getFeeListStyle()">
        <view class="alert-item" v-if="isReletOrder">若使用系统模板默认的车型价格，可通过车型价格模块进行默认值的配置。</view>
        <template v-for="(item, index) in feeFormItem.feeDetailList" :key="item.randomKey">
          <template v-if="item.slotName">
            <slot :name="item.slotName" :feeOption="item" :showDivider="index != feeFormItem.feeDetailList.length - 1"></slot>
          </template>
          <template v-else>
            <template v-if="item.type == 'addServiceFee'">
              <add-service-fee
                class="add-service-fee"
                :index="index"
                :inlineCard="inlineCard"
                :list="feeFormItem.feeDetailList"
                :showDivider="index != feeFormItem.feeDetailList.length - 1"
                v-bind="$attrs"
              />
            </template>
            <template v-else-if="item.type == 'compensateFee'">
              <compensate-fee
                :index="index"
                :list="feeFormItem.feeDetailList"
                :showDivider="index != feeFormItem.feeDetailList.length - 1"
                v-bind="$attrs"
              />
            </template>
            <template v-else>
              <generic-fee
                class="generic-fee"
                :index="index"
                :inlineCard="inlineCard"
                :list="feeFormItem.feeDetailList"
                :requiredKey="requiredKey"
                :orderFormType="orderFormType"
                :showDivider="index != feeFormItem.feeDetailList.length - 1"
                v-bind="$attrs"
                :showViewPriceCalendarBtn="showViewPriceCalendarBtn"
                @viewPriceCalendar="emit('viewPriceCalendar')"
                @feeChange="feeChangeFn"
              />
            </template>
            <view
              v-if="inlineCard && index != feeFormItem.feeDetailList.length - 1"
              style="height: 2rpx; width: 100%; background: rgba(216, 216, 216, 0.3)"
              :style="getInlineCardLineStyle(item)"
            ></view>
          </template>
        </template>
      </view>
    </view>
  </view>
</template>
<script setup>
  import { ref, computed, useSlots, inject } from 'vue'
  import addServiceFee from './fee-list/add-service-fee.vue'
  import genericFee from './fee-list/generic-fee.vue'
  import compensateFee from './fee-list/compensate-fee.vue'
  const props = defineProps({
    orderFeeIndex: {
      type: Number,
      default: 0,
    },
    feeTypeSwitch: {
      type: Boolean,
      default: true,
    },
    showStatistic: {
      type: Boolean,
      default: true,
    },
    showFeeItemTitle: {
      type: Boolean,
      default: true,
    },
    inlineCard: {
      type: Boolean,
      default: false,
    },
    /**
     * 是否是线上订单，影响线上、线下费用的选择
     * 如订单来源为线下订单时，只能选项线下费用
     * 如订单来源为渠道订单时，可选线下费用或线上费用，默认为线下费用
     */
    disabledOnlineFee: {
      type: Boolean,
      default: true,
    },
    prevFeeForm: Object,
    showViewPriceCalendarBtn: {
      type: Boolean,
      default: true,
    },
    orderFormType: {
      type: String,
      default: '',
    },
    // 是否为下单和续租订单
    isReletOrder: {
      type: Boolean,
      default: false,
    },
  })
  const feeTypeOptionList = [
    {
      label: '线下费用',
      value: 1,
    },
    {
      label: '线上费用',
      value: 2,
    },
  ]
  const feeChangeFn = (feeDetailItem, val, index) => {
    emit('feeChange', feeDetailItem, val, index)
  }
  const emit = defineEmits(['viewPriceCalendar', 'feeChange'])
  const feeForm = inject('feeForm')
  const feeFormItem = computed(() => {
    return feeForm.value.orderFee[props.orderFeeIndex]
  })
  // 处理 requireKey
  const requiredKey = computed(() => {
    return `orderFee.${props.orderFeeIndex}.feeDetailList.`
  })
  // 样式优化
  const getFeeListStyle = () => {
    let feeTypeSwitch = props.feeTypeSwitch
    if (feeTypeSwitch) {
      let feeDetailList = feeFormItem.value.feeDetailList
      if (feeDetailList && feeDetailList.length == 1) {
        let item = feeDetailList[0]
        if (item.type == 'addServiceFee') {
          let childrenList = item.childrenList || []
          if (childrenList.some((feeDetailItem) => feeDetailItem.statics)) {
            return {
              'padding-bottom': '30rpx',
            }
          }
        }
      }
    }
    return {}
  }
  // 样式优化2
  const getInlineCardLineStyle = (item) => {
    if (item.type == 'addServiceFee') {
      let childrenList = item.childrenList || []
      if (childrenList.some((feeDetailItem) => feeDetailItem.statics)) {
        return {
          'margin-top': '34rpx',
        }
      }
    }
    return {}
  }
</script>
<style lang="less" scoped>
  .fee-pane-content {
    margin-top: 16px;
    width: 100%;
    .fee-statistic {
      width: 420px;
      margin-left: 20px;
    }
  }
  .alert-item {
    background: #e8f3ff;
    border-radius: 4rpx rrpx 4rpx 4rpx;
    padding: 18rpx 32rpx;
    color: #1d2129;
    line-height: 44rpx;
    font-size: 24rpx;
    margin-bottom: 24rpx;
  }
  .hide-card-title {
    :deep(.ve-card-header),
    :deep(.ve-card-header-border-line) {
      display: none;
    }
  }
  .inline-card {
    margin-top: 0;
    padding: 0 !important;
    :deep(.ve-card-header),
    :deep(.ve-card-header-border-line) {
      padding-left: 0;
      padding-right: 0;
      padding-bottom: 0;
    }
    :deep(.ve-card) {
      box-shadow: none;
      padding-bottom: 0;
      margin-bottom: 0;
    }
    :deep(.ve-card-content) {
      padding: 0 0 0;
    }
    :deep(.ve-card-header-border-line) {
      display: none;
    }
  }
  .fee-pane-header /deep/ .ve-form-item__body {
    align-items: center;
  }
</style>
